<template>
  <!-- 开关 -->
  <div
    class="pho-form-item pho-form-flex"
    :style="{...newStyle,flexDirection:$attrs.isTop ? 'column' : ''}"
  >
    <van-field
      class="form-input-hidden"
      v-bind="$attrs"
      :value="JSON.stringify(value)"
      :label="showLabel ? $attrs.label : ''"
      :name="$attrs.__vModel__"
      :placeholder="$attrs.placeholder"
      input-align="right"
    >
      <span v-if="showLabel" slot="label" :style="newStyle.font">{{$attrs.label}}</span>
    </van-field>
    <!-- 关闭提示 -->
    <div class="right-box center form-components">
      <div v-if="$attrs.readonly || $attrs.onlyShow" class="form-readonly"></div>
      <span
        v-if="$attrs.inactiveText"
        class="pho-form-switch-text--close"
        :style="{ color: $attrs.inactiveColor }"
      >{{ $attrs.inactiveText }}</span>
      <van-switch v-model="formValue" size="20" v-bind="$attrs" @change="handleChange" />
      <!-- 开启提示 -->
      <span
        v-if="$attrs.activeText"
        class="pho-form-switch-text--start"
        :style="{ color: $attrs.activeColor }"
      >{{ $attrs.activeText }}</span>
    </div>
  </div>
</template>

<script>
import { comMixin } from "../../../utils/comMixins";
export default {
  mixins: [comMixin],
  name: "phone-form-switch",
  model: {
    prop: "value", // 绑定的值，通过父组件传递
    event: "update",
  },
  props: {
    value: {
      type: [Number, String, Boolean],
      default: false,
    },
    // 是否展示标题
    showLabel: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      formValue: "",
    };
  },
  watch: {
    value: {
      immediate: true,
      deep: true,
      handler(newValue) {
        this.formValue = newValue;
      },
    },
  },
  methods: {
    handleChange(val) {
      this.$emit("update", val);
      this.$emit("change", val);
      this.onChange(val);
    },
  },
};
</script>

<style lang="scss" scoped>
.pho-form-switch-text--start {
  margin-left: 10px;
}
.pho-form-switch-text--close {
  margin-right: 10px;
}
</style>
